<template>
    <div class="cesium" id="cesiumContainer" style="width: 100%; height: 100vh"></div>
</template>
<script setup>
    import { onMounted } from 'vue'
    import * as Cesium from 'cesium'
    import ms from 'milsymbol'

    onMounted(() => {
        const viewer = new Cesium.Viewer('cesiumContainer', {
            // 主页按钮
            homeButton: false,
            // 场景模式选择器
            sceneModePicker: false,
            // 全屏按钮
            fullscreenButton: false,
            // 是否显示点击要素之后显示的信息
            infoBox: false,
            // 要素选中框
            selectionIndicator: false,
            // 影像切换
            baseLayerPicker: false,
            // 启用了阴影效果
            shadows: true,
            // 启用动画
            shouldAnimate: true,
            // 是否显示动画控件
            animation: false,
            // 是否显示时间线控件
            timeline: false,
            // 是否显示地名查找控件
            geocoder: false,
            // 是否显示帮助信息控件
            navigationHelpButton: false,
            contextOptions: {
                contextType: 2 // Webgl2:2 ; WebGPU:3
            },
            // 版权信息
            creditContainer: document.createElement('div')
        })
        viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10000
        viewer.scene.screenSpaceCameraController.maximumZoomDistance = 1000000000000
        viewer.scene.verticalExaggeration = 5.0;
        viewer.scene.verticalExaggerationRelativeHeight = 2400.0;

        // 隐藏Cesium的logo
        viewer._cesiumWidget._creditContainer.style.display = 'none'
        /** 加载高德地图 */
            // 加载高德影像底图
        const gdBasicLayer = new Cesium.ImageryLayer(
                new Cesium.UrlTemplateImageryProvider({
                    url: 'http://localhost/map/{z}/{x}/{y}.png',
                    style: 'default',
                    format: 'image/png',
                    minimumLevel: 3,
                    maximumLevel: 14,
                    tileMatrixSetID: 'GoogleMapsCompatible'
                })
            )
        viewer.imageryLayers.add(gdBasicLayer)

        Cesium.Ion.defaultAccessToken ='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlZTBmMjMwZC05OTlhLTQwZTYtYjU2ZC0zY2MzZWU3NzQ5NWMiLCJpZCI6NTA1OTEsImlhdCI6MTYxNzc2MTM3Nn0.lSz_1-ihLGeFwu9phZroo_hGVY68QRZfi62J03qu0qM'
        viewer.scene.setTerrain(
            new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromIonAssetId(1))
        );

        // let sym = new MS.Symbol('SFG-UCI----D', { size: 135 })
        const sym = new ms.Symbol('130310001812110000000000000000')
        let bill = new Cesium.Entity({
            position: new Cesium.Cartesian3.fromDegrees(115.601, 29.105),
            billboard: new Cesium.BillboardGraphics({
                image: sym.asCanvas(),
                scale: 0.3, // 缩放比例
                eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0), // 偏移量
                horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM // 垂直对齐方式
            })
            // label: {
            //   text: '首尔', // 要显示的文本
            //   font: '16px Arial', // 字体样式
            //   style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 文本样式，如填充和轮廓等
            //   outlineWidth: 2, // 轮廓宽度
            //   outlineColor: Cesium.Color.BLACK, // 轮廓颜色
            //   showBackground: true, // 是否显示背景
            //   backgroundColor: Cesium.Color.WHITE.withAlpha(0.8) // 背景颜色和透明度
            // }
        })
        viewer.entities.add(bill)
        bill.show = true
        viewer.camera.flyTo({
            destination:Cesium.Cartesian3.fromDegrees(115.601, 29.105, 1000000.0)
        });

        // viewer.entities.add({
        //   position: Cesium.Cartesian3.fromDegrees(126, 41),
        //   billboard: {
        //     image: sym.asCanvas(), //Get the canvas for the billboard
        //     pixelOffset: new Cesium.Cartesian2(-sym.anchorX, -sym.anchorY), // Symbol offset
        //     eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), // default
        //     horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // default
        //     verticalOrigin: Cesium.VerticalOrigin.TOP
        //   }
        // })
        // 加载地形数据
        // const terrainProvider = new Cesium.CesiumTerrainProvider({
        //   url: 'https://s3.amazonaws.com/elevation-tiles-prod/terrarium/{z}/{x}/{y}.png',
        //   requestWaterMask: true, //请求水体效果所需要的海岸线数据
        //   requestVertexNormals: true //请求地形照明数据
        // })
        // viewer.terrainProvider = terrainProvider
    })
</script>

<style lang="scss" scoped>
    .layout-content {
        width: 100%;
        margin: auto;
    }
</style>
